<script>
import { tableAdmin } from "./tableName";
const tableNameWidthList = ["checkCard", "checkTable", "taxCalculateReport"];
export default {
  props: {
    /**
     * @type {string} 表格名称
     */
    tableName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      tableAdmin,
      filterBtnffsetLeft: 0,
      screeningWidth: 306
    };
  },
  mounted() {
    const dom = document.querySelector("#filterBtn");
    if (dom) this.filterBtnffsetLeft = dom.offsetLeft;
    this.getStyleWidth(this.$store.state.app.sidebar.opened);
  },
  watch: {
    "$store.state.app.sidebar.opened"(v) {
      this.getStyleWidth(v);
    }
  },
  methods: {
    getStyleWidth(v) {
      if (this.tableAdmin.includes(this.tableName)) {
        this.screeningWidth = 284;
      } else {
        this.screeningWidth = v ? 306 : 160;
      }
    },
    clickHandler(event) {
      this.$store.commit("Table/screeningVisible", true);
      event.stopPropagation();
    },
    onClose(event) {
      this.$store.commit("Table/screeningVisible", false);
      this.$emit("onClose");
      event.stopPropagation();
    },
    onSearch(event) {
      this.$store.commit("Table/screeningVisible", false);
      this.$emit("onSearch");
      event.stopPropagation();
    }
  },
  render(h) {
    if (!this.$slots.default) return false;
    const getSearchBox = () => {
      if (this.$store.state.Table.screeningVisible) {
        return (
          <div
            class="drawer"
            style={{
              width: `calc(100vw - ${this.screeningWidth}px)`,
              left: `-${tableNameWidthList.includes(this.tableName) ? this.filterBtnffsetLeft : this.filterBtnffsetLeft - 22}px`
            }}
          >
            <div
              class="triangle"
              style={{
                left: `${tableNameWidthList.includes(this.tableName) ? this.filterBtnffsetLeft - 6 : this.filterBtnffsetLeft - 28}px`
              }}
            ></div>
            <div class="search-box">
              <a-row type="flex">
                {this.$slots.default.map((e, i) => {
                  if (e.tag && e.data?.attrs.label) {
                    const label = e.data.attrs.label;
                    return (
                      <a-col span={6} class="search-box-col">
                        <p>{label}</p>
                        {e}
                      </a-col>
                    );
                  }
                })}
              </a-row>
            </div>
            <div class="action">
              <a-button style="margin-right: 12px" onClick={this.onClose}>
                取消
              </a-button>
              <a-button type="primary" onClick={this.onSearch}>
                查询
              </a-button>
            </div>
          </div>
        );
      }
    };
    const getButton = () => {
      let f = false;
      this.$slots.default.some((e) => {
        if (e.tag && e.data?.attrs.label) {
          f = true;
          return false;
        }
      });
      if (this.$slots.default.length > 1 && f) {
        return (
          <a-button icon="filter" id="filterBtn" style="color:#AAAAAA;margin-right:12px;" onClick={this.clickHandler}>
            {getSearchBox()}
          </a-button>
        );
      }
    };
    // let width = "200px";
    // if (this.$slots.default[0].data.staticStyle && this.$slots.default[0].data.staticStyle.width) {
    //   width = "auto";
    // } else {
    //   this.$nextTick(() => {
    //     this.$slots.default[0].elm.style.width = "100%";
    //   });
    // }
    return (
      <div class="table-screening-box">
        {this.$slots.default.map((e) => {
          let width = "200px";
          if (e.tag && !e.data?.attrs.label) {
            if (e.data?.staticStyle && e.data.staticStyle.width) {
              width = "auto";
            } else {
              this.$nextTick(() => {
                if (e.elm?.style) e.elm.style.width = "100%";
              });
            }
            return (
              <div class="mr12" style={{ width }}>
                {e}
              </div>
            );
          }
        })}
        {getButton()}
      </div>
    );
  }
  // {this.$slots.default.map((e, i) => {
  //         if (e.data.attrs.domType === "button") {
  //           return { e };
  //         }
  //       })}
};
</script>
<style lang="scss" scoped>
.table-screening-box {
  display: flex;
  .search-box {
    padding: 24px 24px 0 24px;
    // display: flex;
    // input {
    //   border: 0;
    // }
    .search-box-col {
      padding-right: 24px;
      margin-bottom: 24px;
      &:nth-child(4n) {
        padding: 0;
      }
      p {
        height: 20px;
        color: #636363;
        font-size: 14px;
        margin-bottom: 12px;
      }
    }
  }
  .triangle {
    position: absolute;
    top: -30px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff;
  }
  .drawer {
    background: #fff;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    z-index: 99;
    min-height: 168px;
    position: absolute;
    top: 44px;
    text-align: left;
    padding-bottom: 54px;
  }
  .action {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    // border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    background: #fff;
    text-align: right;
    z-index: 1;
  }
}
</style>
